<template>
  <div>
    <el-container>
      <!-- 头部 -->
      <el-header>
        <div><h2>电商管理系统</h2></div>
        <div><el-button type="danger" @click="logout">退出</el-button></div>
      </el-header>
      <!-- 内容主体 -->
      <el-container>
        <!-- 左侧区域 -->
        <el-aside width="200px">
          <!-- 菜单栏 -->
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            background-color="#333744"
            text-color="#fff"
            active-text-color="#ffd04b"
            :collapse="isCollapse"
            router
          >
            <!-- 折叠按钮 -->
            <p @click="add" style="color: #fff; text-align: center">| | |</p>
            <!-- 二级路由 -->
            <el-submenu
              :index="item.path"
              v-for="(item, index) in menuList"
              :key="index"
            >
              <template slot="title">
                <i class="el-icon-s-grid"></i>
                <span>{{ item.authName }}</span>
              </template>
              <!-- 二级路由 -->
              <el-menu-item
                :index="'/admin/' + im.path"
                v-for="(im, ix) in item.children"
                :key="ix"
              >
                <i class="el-icon-menu"></i>
                <span>{{ im.authName }}</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-- 右侧区域 -->
        <el-main>
          <!-- 路由切换 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { menu } from "@/axios/https";
export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {
      isCollapse: false,
      menuList: [],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    //   设置高度
    this.setHeight();
    //   页面刷新调用
    window.addEventListener("resize", this.setHeight);
    //   左侧菜单栏调用
    this.getMenuList();
  },
  methods: {
    //   设置高度
    setHeight() {
      let html = document.documentElement || document.body;
      let wh = html.clientHeight;
      let aside = document.querySelector(".el-aside");
      let main = document.querySelector(".el-main");
      aside.style.height = wh - 60 + "px";
      main.style.height = wh - 60 + "px";
    },
    // 点击切换
    add() {
      let aside = document.querySelector(".el-aside");
      this.isCollapse = !this.isCollapse;
      if (!this.isCollapse) {
        aside.className = "el-aside open";
      } else {
        aside.className = "el-aside coles";
      }
    },
    // 获取菜单栏权限
    async getMenuList() {
      const { data: res } = await menu();
      if (res.meta.status != 200) return this.$message.error(res.meta.msg);
      this.menuList = res.data;
      this.$message.success(res.meta.msg);
    },
    // 退出
    logout() {
      sessionStorage.removeItem("user");
      this.$message.success("已退出登录");
      this.$router.push("/admin/login");
    },
  },
};
</script>
<style scoped>
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #333744;
  color: #fff;
}
.el-aside {
  background: #333744;
}
.el-menu {
  border: 0;
  width: 100%;
}
.open {
  width: 200px !important;
}
.coles {
  width: 80px !important;
}
</style>